<template>
  <div style="height: 100%">
    <ProTable
      ref="tableRef"
      :columns="columns"
      :request-api="getTableList"
      :params="initParam"
      :mode="mode"
      :selected-rows="selectedRows"
      @selection-change="handleSelectionChange"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary">新增用户</el-button>
        <el-button type="danger">批量删除</el-button>
      </template>
      <template #status="{ row }">
        <el-tag :type="row.status ? 'success' : 'danger'">{{ row.status ? "启用" : "禁用" }}</el-tag>
      </template>
      <!-- 表格操作 -->
      <!-- <template #operation>
          <el-button type="primary" link>查看</el-button>
          <el-button type="primary" link>编辑</el-button>
          <el-button type="primary" link>重置密码</el-button>
          <el-button type="primary" link>删除</el-button>
        </template> -->
    </ProTable>
  </div>
</template>

<script lang="ts">
export default {
  name: 'TableA',
}
</script>
<script setup lang="ts">
import { ColumnProps } from '@/types/table';
import { UserPageVO } from "@/api/user/types";
import { getUserList } from "@/api/user";

const props = defineProps({
  mode: {
    type: String,
    default: '',
  },
  selectedRows: {
    type: [Array, Object],
    default: [],
  },
});

const emit = defineEmits(["selection-change"]);

// 表格配置项
let columns = ref<ColumnProps<UserPageVO>[]>([
  { type: "selection", fixed: "left" },
  { type: "index", label: "序号" },
  {
    prop: "username",
    label: "用户姓名",
    valueType: "input",
    search: true,
  },
  {
    prop: "gender",
    label: "性别",
    width: 100,
    // 字典数据
    options: [
      {
        label: "女", value: 1
      },
      {
        label: "男", value: 2
      },
    ],
    valueType: "select",
    search: true,
  },
  {
    prop: "age",
    label: "年龄",
    width: 144,
    customRender: (row: any) => row.user.detail?.age,
    search: true,
  },
  {
    prop: "idCard",
    label: "身份证号",
    valueType: "input",
    search: true,
  },
  { 
    prop: "email", 
    label: "邮箱",
  },
  {
    prop: "address",
    label: "居住地址",
  },
  {
    prop: "status",
    label: "用户状态",
    options: [
      { label: "禁用", value: 0 },
      { label: "启用", value: 1 },
    ],
    valueType: "select",
    search: true,
  },
  {
    prop: "createTime",
    label: "创建时间",
    width: 180,
  },
  {
    prop: "operation",
    label: "操作",
    fixed: "right",
    width: 180,
  }
])

const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  newParams.createTime && (newParams.startTime = newParams.createTime[0]);
  newParams.createTime && (newParams.endTime = newParams.createTime[1]);
  delete newParams.createTime;
  return getUserList(newParams).then((res: any) => {
    return res.data
  });
};

const initParam = reactive({ type: 1 });

const handleSelectionChange = (val: any) => {
  console.log('selectedList: ', val);
  emit("selection-change", val)
};

defineExpose({
});
</script>

<style></style>
